<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>心猜详情</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href=" http://at.alicdn.com/t/font_474420_2hkgctv5pzni2j4i.css">
	<style type="text/css">
		  body{background: #f4f4f4;padding-bottom: 1rem;}
		.list_img{width: 100%;}
		.img_div{position: relative;}
		.time{width: 3.24rem;height: .58rem;line-height: .58rem;border-radius: .08rem;background: rgba(0, 0, 0, 0.52);
			position: absolute;right:.22rem;bottom: .20rem;color: #fff;font-size: .26rem;text-align: center;}
		.icon_prises{width:.74rem;position: absolute;right: .20rem;top: .20rem;}
		.icon_prise{width:.74rem;margin-bottom: .10rem;}
		.title{font-size: .32rem;color: #353535;font-weight: bold;padding:.37rem .20rem .23rem .20rem;line-height: .43rem;}
		.content{font-size: .28rem;color: #666666;line-height: .45rem;padding: 0 .20rem .30rem .20rem;}
		.header{background: #fff;}
		.options_content{font-size: .28rem;color: #999999;padding: .25rem 0 .25rem .23rem;line-height: .40rem;}
		.options{margin-top:.28rem;background: #fff;padding-bottom: .5rem;margin-bottom: .3rem;}
		.options_input{padding: .35rem 0 0 0;background: #f4f4f4;width: 7.04rem;margin:0 auto;height: 1.4rem;box-sizing: border-box;border-radius: .1rem;}
		.options_input input{width: 2.98rem;height: .72rem;background: #fff;text-align: center;border-radius: .04rem;
			color:#333;font-size: .28rem;display: block;border:1px solid #e2e2e2;margin-left: 1.99rem;float: left; }
		.options_input span{font-size: .28rem;color: #666666;float: left;margin-left: .10rem;height: .72rem;line-height: .72rem;}
	    .confirm{width: 2.49rem;height: .73rem;color: #fff;font-size: .32rem;color: #fff;background: #f8d434;display: block;margin:.42rem auto 0;border-radius: .1rem;}
		.optionA{width: 7rem;height: 1.12rem;border-radius: .1rem;background: #f4f4f4;overflow: hidden;margin:0 auto;vertical-align: middle;}
		.optionA .optionA_left{width: 1.12rem;height: 1.12rem;background: #f89934;font-size: .32rem;color: #fff;text-align: center;line-height: 1.12rem;float: left;}
        .optionA_right{font-size: .28rem;color: #333333;height:1.12rem;padding: 0 .23rem;width: 5rem;box-sizing: border-box;float: left;vertical-align: middle;
        	display: -webkit-box;
		   -webkit-box-orient: horizontal;
		   -webkit-box-pack: center;
		   -webkit-box-align: center;
		  
			  display: -moz-box;
			  -moz-box-orient: horizontal;
			  -moz-box-pack: center;
			  -moz-box-align: center;
			  
			  display: -o-box;
			  -o-box-orient: horizontal;
			  -o-box-pack: center;
			  -o-box-align: center;
			  
			  display: -ms-box;
			  -ms-box-orient: horizontal;
			  -ms-box-pack: center;
			  -ms-box-align: center;
			  
			  display: box;
			  box-orient: horizontal;
			  box-pack: center;
			  box-align: center;
        }
		.optionA_right .empty{height:100%;vertical-align:middle; display: inline-block;}
		.optionA_right .text{font-size: .28rem;color: #333333;display:inline-block;line-height: .38rem;}
		.optionB{margin-top: .28rem;}
		.optionA_left img{width: .5rem;position: relative;top: .05rem;}
		.optionA_left.selected{background: #f8d434;}
		.views_title{height: .35rem;line-height: .35rem;color: #333333;font-size: .3rem;border-left:3px solid #333;padding-left: .15rem;margin-bottom: .4rem;}
		.views{padding: 0 .22rem;background: #fff;padding-top: .4rem;}

		/*奖品设置*/
		.prize{padding:.32rem 0 .2rem .24rem;background: #fff;overflow: scroll;white-space: nowrap;}
		.prize_list{width: 2.3rem;margin-left: .2rem;display: inline-block;}
		.prize_list .prize_img{overflow: hidden;position: relative;width: 2.3rem;height: 2.55rem;border-radius: .1rem;box-shadow:  0 0 .5rem #eee;text-align: center;display: table-cell;vertical-align: middle;}
		.prize_list img{width: 1.25rem;vertical-align: middle;}
		.prize_num{color:#fff; font-size:.24rem;text-align: center;background: #fb597b;padding: 0 .17rem;position: absolute;bottom: 0;left: 0;border-top-right-radius: .25rem;border-bottom-left-radius: .1rem;}
		.prize_name{color:#333333;font-size: .24rem;margin:.15rem 0 .2rem 0;height: .6rem;
			word-wrap:break-word;word-break:break-all;
			overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		     -webkit-line-clamp: 2;
		     -webkit-box-orient: vertical;
             white-space: normal;
		}
		.prize_money{font-size: .26rem;color: #f89934;}

		/*合作伙伴*/
		.hezuo_title{font-size: .28rem;color: #333333;height: .87rem;line-height: .87rem;font-weight: bold;text-align: center;}
		.hezuo{width: 7rem;height: 2.68rem;background: #fff;border-radius: .17rem;margin:.25rem auto;overflow: hidden;}
       .hezuo_logo{vertical-align: middle;text-align: center;height: 1rem;width: 100%;}
       .hezuo_logo span{ height:100%;
        display:inline-block;
        vertical-align:middle;}
       .hezuo li{width: 25%;text-align: center;float: left;}
       .hezuo li img{width: .76rem;vertical-align: middle;}
       .logo_name{font-size: .22rem;color: #333333;text-align: center;}

       .views_list{overflow: hidden;padding: .3rem 0 .4rem 0;position: relative;}
       .views_list .views_list_photo{float: left;width: .76rem;height: .76rem;border-radius: 50%;}
       .views_right{float: left;margin-left: .2rem;width: 6rem;}
       .views_time li:first-child{font-size: .28rem;color: #666666;font-weight: bold;margin-top: .08rem;}
       .views_time li:last-child{font-size: .24rem;color: #999999;margin-top: .05rem;}
       .views_info{font-size: .3rem;color: #333333;margin-top: .24rem;}
       .views_time ul{float: left;}
       .views_time{overflow: hidden;}
       .views_time span{float: right;font-size: .24rem;color: #666666;margin-top: .26rem;}
       .icon-dz{font-size: .4rem;color: #666666;margin-left: .06rem;}
       .icon-dianzan{font-size: .4rem;color: #fb597b;margin-left: .06rem;}
       .footer{ box-shadow: 0 3px .2rem rgba(0, 0, 0, 0.2);height: 1rem;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 50;background: #fff;}
       .footer button{width: 5.32rem;height: .73rem;text-align: center;border-radius: .1rem;color: #fff;font-size: .3rem;background: #fb597b;margin:.14rem 0 0 .25rem;}
	   .footer .share_btn{color: #333333;font-size: .3rem;display: inline-block;width: 1.8rem;text-align: center;height: .73rem;line-height: .73rem;margin-top: .14rem;}
       .icon-fenxiang{font-size: .34rem;color: #666666;margin-right: 0.08rem;position: relative;top: 0.02rem;}
       .views_content{width: 100%;height:2.7rem;position: absolute;background: #fff;bottom: 0;left: 0;z-index: 1001;overflow: hidden;}
       #view{width: 7rem;height: 1.55rem;display: block;background: #f5f5f5;box-sizing: border-box;padding: .15rem;font-size: .28rem;margin:.25rem auto;border:none;outline: none;border-radius: .1rem;}
      .views_content button{width: 1.5rem;text-align: center;color: #fff;float: right;margin-right: .24rem;background: #fb597b;font-size: .26rem;height: .5rem;border-radius: .08rem;}
    .shareimg{width: 100%;position: absolute;top: 0;right: 0;z-index: 1001;}
       .ruleimg{width:1.81rem;position: fixed;right: 0;top: 5.28rem;z-index: 30; }
        .pop_content{width: 70%;position: absolute;top: 1rem;left: 50%;margin-left:-35%;}
      .closePop{width: .6rem;position: absolute;top: -0.3rem;right: -0.3rem;}
     .popImg{width: 100%;display: block;}
    .save{width: 4rem;height: .7rem;text-align: center;position: absolute;bottom: -1rem;left: 50%;margin-left:-2.14rem;color: #fff;line-height: .7rem;border-radius: .15rem;border:1px solid #fff;font-size: .28rem;background: rgba(0, 0, 0, 0.55); }
     /*规则弹窗页面*/
        .rule_content{width: 6.30rem;min-height: 3.30rem;max-height: 9rem;position: absolute;top: 1rem;left: 50%;margin-left: -3.15rem;background: #ffffff;border-radius: .18rem;z-index: 100;}
        .rule_title{text-align: center;font-size: .28rem;color: #333333;
          width: 6.30rem;
          height: .88rem;line-height: .88rem;background: #e5e5e5;border-top-left-radius: .18rem;border-top-right-radius: .18rem;}
        .rule_title .rule_img{width: .45rem;vertical-align: middle;}
        .rule_list_content{max-height: 6rem;overflow-y: scroll;}
        .closeImg{width: .40rem;position: absolute;top: .20rem;right:.20rem;}
        .closeImg1{width: .40rem;position: absolute;bottom: -.73rem;left: 50%;margin-left: -.2rem;}
        .rule_list{overflow: hidden;margin-top: .37rem;
          word-wrap:break-word;
        word-break:break-all;}
        .rule_list span{width: .34rem;height: .34rem;display: block;float: left;background: #e5e5e5;color: #fff;font-weight: bold;border-radius: 50%;font-size: .24rem;text-align: center;line-height: .35rem;margin:0 .17rem 0 .30rem;}
        .rule_list div{font-size: .28rem;color: #666666;float: left;width: 5.06rem;line-height: .35rem;}
        .rule_bottom{text-align: center;font-size: .26rem;color: #999999;margin-top: .50rem;padding-bottom: .30rem;}
        /*规则弹窗页面end*/
    </style>
</head>
<body>
<div id="app">
     <img src="img/p_55.png" alt="" class="ruleimg" @click="toggleRule">
    
    <!-- 输入观点弹窗 -->
    <div class="mask_layer" v-show="viewFlag">
        <div class="mask_model" @click="toggleView"></div>
        <div class="views_content">
            <textarea id="view" placeholder="请输入您的观点..."></textarea> 
            <button type="button">确定</button>
        </div>
    </div>
    <!-- 输入观点弹窗 end-->

    <!-- 分享弹窗 -->
    <div class="mask_layer" v-show="shareFlag">
        <div class="mask_model" @click="toggleShare"></div>
        <img src="img/p_56.png" alt="" class="shareimg"  @click="toggleShare">
    </div>
    <!-- 分享弹窗 -->
    <!-- 图片弹窗 -->
    <div class="rule_mask" v-show="popFlag">
        <div class="pop_content">
          <img src="img/pop.jpg"   alt="" class="popImg">
           <!-- <img :src="resObj.answerImg"   alt="" class="popImg"> -->
           <div class="save">长按图片保存 分享到朋友圈</div>
           <img src="img/p_28.png" alt="" class="closePop" @click="togglePop">
       </div>
    </div>
    <!-- 图片弹窗 -->
    <!-- 规则弹窗 -->
      <div class="rule_mask" v-show="ruleFlag">
           <div class="rule_model"  @click="toggleRule"></div>
           <div class="rule_content">
                <div class="rule_title">
                    <img src="img/p_20.png" alt="" class="rule_img">
                     奖励规则
                    <img src="img/p_20.png" alt="" class="rule_img">
                </div>
                <div class="rule_list_content">
                  <!-- <div class="rule_list" v-for="(item,index) in rules">
                    <span>{{index+1}}</span>
                    <div class="rule_detail">{{item.rule}}</div>        
                  </div> -->
                  <div class="rule_list">
                    <span>1</span>
                    <div class="rule_detail">33333</div>        
                  </div>
                  <div class="rule_list">
                    <span>2</span>
                    <div class="rule_detail">33333</div>        
                  </div>
                </div>
                <div class="rule_bottom">- 本活动最终解释权归心猜所有 -</div>

                
                <img src="img/p_21.png" alt="" class="closeImg1"  @click="toggleRule">

           </div>
      </div>
      <!-- 规则弹窗 end -->

  
	<div class="header">     
        <div class="img_div">
        	<img src="img/p_3.png" class="list_img" /> 
            <span class="time">竞猜时间：10.01-11.11</span> 
            <div class="icon_prises">
              <!-- 参与 -->
             <img src="img/p_22.png" class="icon_prise" /> 
              <!-- 参与 end-->
            </div>    
        </div>
        <div class="title">
            2017年天猫双十一交易额竞猜，请你猜猜看好的你来看看？
        </div>
        <div class="content">
           站酷(ZCOOL),中国人气设计师互动平台。深耕设计领域十年,站酷聚集了470万优秀设计师、摄影师、插画师、艺术家、创意人,设计创意群体中具有较高的影响力。
        </div>
    </div> 
    <div class="options">
        <!-- <div class="option">
        	<div class="options_content">您的预测是:</div>
	        <div class="options_input">
	            <input placeholder="请填写整数" />
	            <span>亿人民币</span>        
	        </div>
        </div> -->
        <div class="option">
        	<div class="options_content">您的预测是:</div>
	        <div class="optionA">
	         	<!-- <div class="optionA_left">
	         		A
	         	</div> -->
	         	<div class="optionA_left selected">
	         		<img src="img/p_48.png" alt="">
	         	</div>
	         	<div class="optionA_right">
	         	  <span class="text">2017年双十一我的预测是1800亿元，人民币，呵呵</span>
	         	</div>
	        </div>
	        <div class="optionA optionB">
	         	<div class="optionA_left">
	         		B
	         	</div>
	         	<div class="optionA_right">
	         	  <span class="text">2017年双十一我的预测是1800亿元，人民币，呵呵</span>
	         	</div>
	        </div>
        </div>
        
        <button type="button" class="confirm">确定</button>
    </div>
    <div class="prize">
    	<ul>
    		<li class="prize_list">
    			<div class="prize_img">
    				<img src="img/p_46.png" alt="">
    				<span class="prize_num">一等奖:20名</span>
    			</div>
    			<div class="prize_name">
    				iPhone X 银色高光256G
    			</div>
    			<div class="prize_money">
    				￥9886元
    			</div>
    		</li>
    		<li class="prize_list">
    			<div class="prize_img">
    				<img src="img/p_46.png" alt="">
    				<span class="prize_num">一等奖:20名</span>
    			</div>
    			<div class="prize_name">
    				iPhone X 银色高光256G
    			</div>
    			<div class="prize_money">
    				￥9886元
    			</div>
    		</li>
    		<li class="prize_list">
    			<div class="prize_img">
    				<img src="img/p_46.png" alt="">
    				<span class="prize_num">一等奖:20名</span>
    			</div>
    			<div class="prize_name">
    				iPhone X 银色高光256G
    			</div>
    			<div class="prize_money">
    				￥9886元
    			</div>
    		</li>
    	</ul>
    </div>
    <div class="hezuo">
    	<div class="hezuo_title">合作伙伴</div>
    	<ul>
    		<li>
    			<div class="hezuo_logo">
    			    <span></span>
    				<img src="img/p_47.png" alt="">
    			</div>
    			<div class="logo_name">亿欧</div>
    		</li>
    		<li>
    			<div class="hezuo_logo">
    			    <span></span>
    				<img src="img/p_47.png" alt="">
    			</div>
    			<div class="logo_name">亿欧</div>
    		</li>
    		<li>
    			<div class="hezuo_logo">
    			    <span></span>
    				<img src="img/p_47.png" alt="">
    			</div>
    			<div class="logo_name">亿欧</div>
    		</li>
    		<li>
    			<div class="hezuo_logo">
    			    <span></span>
    				<img src="img/p_47.png" alt="">
    			</div>
    			<div class="logo_name">亿欧</div>
    		</li>
    	</ul>
    </div>
    <div class="views">
    	<div class="views_title">观点</div>
    	<ul class="">
    		<li class="views_list borderBottom">
    			<img src="img/p_35.png" alt="" class="views_list_photo">
                <div class="views_right">
                    <div class="views_time">
                        <ul>
                            <li>天天想你</li>
                            <li>4/27</li>
                        </ul>
                        <span>1546<i class="iconfont icon-dz"></i></span>
                    </div>
                    <div class="views_info">
                        参考消息网11月9日报道德国《世界报》网站11月7日发表题为《地区内代理人战争将升级”》的文章称,在中东,人们早已对沙特
                    </div>
                </div>
    		</li>
            <li class="views_list borderBottom">
                <img src="img/p_35.png" alt="" class="views_list_photo">
                <div class="views_right">
                    <div class="views_time">
                        <ul>
                            <li>天天想你</li>
                            <li>4/27</li>
                        </ul>
                        <span>1546<i class="iconfont icon-dz"></i></span>
                    </div>
                    <div class="views_info">
                        参考消息网11月9日报道德国《世界报》网站11月7日发表题为《地区内代理人战争将升级”》的文章称,在中东,人们早已对沙特
                    </div>
                </div>
            </li>
    	</ul>
    </div>

    <div class="footer">
       <button type="button" @click="toggleView">发表观点</button>
       <span class="share_btn" @click="toggleShare"><i class="iconfont icon-fenxiang"></i>分享</span>
    </div>
</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                viewFlag:false,
                ruleFlag:false,
                shareFlag:false,
                 popFlag:false     
            },
            methods: {
                toggleView:function(){
                    this.viewFlag=!this.viewFlag;
                },
                toggleShare:function(){
                    this.shareFlag=!this.shareFlag;
                },
                toggleRule:function(){
                    this.ruleFlag=!this.ruleFlag;
                },
                togglePop(){
                    this.popFlag=!this.popFlag;  
                }
            }
        })
    </script>
</body>
</html>